<template>
  <div>
    <c-title :hide="false" text="我的充电桩"></c-title>
    <div class="block">
      <div class="title">充电桩汇总</div>
      <div class="num-list">
        <div class="num-item">
          <div class="num">{{ installed }}</div>
          <div class="item">已安装</div>
        </div>
        <div class="num-item">
          <div class="num">{{ uninstalled }}</div>
          <div class="item">待安装</div>
        </div>
        <div class="num-item">
          <div class="num">{{ teamTotal }}</div>
          <div class="item">团队</div>
        </div>
      </div>
    </div>

    <van-tabs type="card" color="#6F8DED" v-model="tabActive" @change="tabsClick">
      <van-tab title="已安装" name="1"></van-tab>
      <van-tab title="待安装" name="0"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="listRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length ? '没有更多了' : ''"
        @load="getMyChargingStation"
      >
        <template v-if="list.length">
          <van-cell-group v-for="item in list" :key="item.id" inset class="card-cell-group">
            <van-cell title="" label-class="ta-l c-32">
              <template slot="label">
                <div>订单编号：{{ item.order_sn }}</div>
                <div>充电桩编号：{{ item.coding }}</div>
                <div>地址：{{ item.full_address }}</div>
                <div>下单日期：{{ item.order_at }}</div>
                <div v-if="tabActive == 1">安装日期：{{ item.updated_at }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </template>
        <van-empty description="暂无数据" v-else />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      installed: 0,
      uninstalled: 0,
      teamTotal: 0,
      tabActive: '1',
      page: 1,
      pageSize: 5,
      list: [],
      refreshing: false,
      loading: false,
      finished: false
    };
  },
  mounted() {
    // this.getMyChargingStation();
  },
  methods: {
    /**
     * 选项卡切换
     */
    tabsClick: function() {
      this.list.splice(0, this.list.length);
      this.page = 1;
      this.finished = false;
    },

    /**
     * 获取数据
     */
    getMyChargingStation: function() {
      const status = this.tabActive;
      const _this = this;
      const { page, pageSize } = this;
      $http
        .get("plugin.charging.frontend.index.get-data", { page, size: pageSize, status })
        .then(response => {
          // 下拉刷新清空列表
          if (_this.refreshing) {
            _this.list.splice(0, this.list.length);
            _this.refreshing = false;
          }
          const { data, result, msg} = response;
          if (result == 1) {
            const { list, total, installed, uninstalled, team_total } = data;
            _this.list.push(...list);
            _this.installed = installed;
            _this.uninstalled = uninstalled;
            _this.teamTotal = team_total;
            if (_this.list.length >= total) {
              _this.finished = true;
            }
            this.page = this.page + 1;
          } else {
            Toast(msg || '数据加载失败！');
          }
        }).finally(() => {
          _this.loading = false;
        });
    },

    /**
     * 列表下拉刷新
     */
    listRefresh: function() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.page = 1;
      this.loading = true;
      this.getMyChargingStation();
    }
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.ta-l {
  text-align: left;
}
.c-32 {
  color: #323232;
}
.block {
  margin: 10px;
  margin-top: 0;
  background-color: #fff;
  text-align: left;
  padding: 10px;
  .title {
    font-size: 16px;
  }
  .num-list {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
  }
}
.card-cell-group {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>